<template>
  <div class="search-form-container">
    <a-form
      ref="formRef"
      layout="inline"
      class="search-form"
    >
      <!-- 常用搜索项 -->
      <template v-for="(item, index) in normalItems" :key="index">
        <a-form-item :name="item.name" :label="item.label">
          <component
            :is="getComponentName(item.component)"
            v-bind="item.props || {}"
            v-model:value="localQueryParams[item.name]"
            :disabled="loading"
          />
        </a-form-item>
      </template>

      <!-- 高级搜索项 -->
      <template v-if="showAdvanced && advancedItems.length">
        <template v-for="(item, index) in advancedItems" :key="`adv_${index}`">
          <a-form-item :name="item.name" :label="item.label">
            <component
              :is="getComponentName(item.component)"
              v-bind="item.props || {}"
              v-model:value="localQueryParams[item.name]"
              :disabled="loading"
            />
          </a-form-item>
        </template>
      </template>

      <!-- 操作按钮 -->
      <a-form-item>
        <a-space>
          <a-button type="primary" :loading="loading" @click="handleSubmit">
            查询
          </a-button>
          <a-button :disabled="loading" @click="handleReset">
            重置
          </a-button>
          <a-button
            v-if="advancedItems.length"
            type="link"
            @click="toggleAdvanced"
          >
            {{ showAdvanced ? '收起' : '展开' }}
            <component :is="showAdvanced ? UpOutlined : DownOutlined" />
          </a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, watch } from 'vue';
import { DownOutlined, UpOutlined } from '@ant-design/icons-vue';

/**
 * 搜索表单组件
 */
const props = defineProps({
  /** 搜索表单项配置 */
  searchItems: {
    type: Array,
    default: () => []
  },
  /** 初始表单值 */
  initialValues: {
    type: Object,
    default: () => ({})
  },
  /** 高级搜索显示状态 */
  showAdvanced: {
    type: Boolean,
    default: false
  },
  /** 加载状态 */
  loading: {
    type: Boolean,
    default: false
  },
  /** 最大常用搜索项显示数量 */
  maxNormalItems: {
    type: Number,
    default: 3
  },
  /** 查询参数 */
  queryParams: {
    type: Object,
    default: () => ({})
  }
});

const emit = defineEmits(['search', 'reset']);
const localQueryParams = ref(props.queryParams);
const formRef = ref(null);
const showAdvancedLocal = ref(props.showAdvanced);

// 计算常用搜索项和高级搜索项
const normalItems = computed(() => {
  return props.searchItems.slice(0, props.maxNormalItems);
});

const advancedItems = computed(() => {
  return props.searchItems.slice(props.maxNormalItems);
});

// 获取组件名称
const getComponentName = (component) => {
  // 简化组件名称，比如将 'a-input' 转换为 AInput
  if (!component) return 'a-input';
  return component;
};

// 切换高级搜索显示状态
const toggleAdvanced = () => {
  showAdvancedLocal.value = !showAdvancedLocal.value;
};

// 计算实际的高级搜索显示状态
const showAdvanced = computed(() => {
  return showAdvancedLocal.value;
});
// 表单提交
const handleSubmit = () => {
  emit('search');
};

// 表单重置
const handleReset = () => {
  // 触发重置事件
  emit('reset');
};
</script>

<style scoped>
.search-form-container {
  margin-bottom: 10px;
  padding: 24px 24px 0;
  background-color: #fff;
  border-radius: 2px;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.search-form :deep(.ant-form-item) {
  margin-right: 16px;
  margin-bottom: 16px;
  display: flex;
}
</style>
